<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习5：DOM操作</title>
		<style type="text/css">
			html,div,ul,li {margin: 0px;padding: 0px;}
			a{cursor: pointer;}
			li {list-style: none;cursor: pointer;}
			fieldset {border: #000 1px dashed;width: 225px;height: 225px;padding: 10px;text-align: center;float: left;margin-left: 5px;}
			#cont_left {width: 300px;height: 500px;float: left;}
			#cont_right {float: left;}
			.newcss1{background-color: yellowgreen;}
		</style>
	</head>
	<body>
		<div id="cont_left">
			<ul><img src="https://zbd923.gitee.io/zheng-beidongs-workspace/images/fold.gif"><a onclick="show('menu1')"> 通过DOM获取信息 </a>
				<ul id="menu1">
					<li onclick="showImg()"><img src="https://zbd923.gitee.io/zheng-beidongs-workspace/images/doc.gif">获取原始图片路径</li>
					<li onclick="getFruit()"><img src="https://zbd923.gitee.io/zheng-beidongs-workspace/images/doc.gif">获取我喜欢的水果</li>
				</ul>
			</ul>

			<ul><img src="https://zbd923.gitee.io/zheng-beidongs-workspace/images/fold.gif"><a onclick="show('menu2')"> 通过DOM操作元素 </a>
				<ul id="menu2">
					<li onclick="createImg()"><img src="https://zbd923.gitee.io/zheng-beidongs-workspace/images/doc.gif">创建图片</li>
					<li onclick="cloneImg()"><img src="https://zbd923.gitee.io/zheng-beidongs-workspace/images/doc.gif">克隆图片</li>
					<li onclick="changeImg()"><img src="https://zbd923.gitee.io/zheng-beidongs-workspace/images/doc.gif">改变图片</li>
					<li onclick="removeImg()"><img src="https://zbd923.gitee.io/zheng-beidongs-workspace/images/doc.gif">删除图片</li>
				</ul>
			</ul>

			<ul><img src="https://zbd923.gitee.io/zheng-beidongs-workspace/images/fold.gif"><a onclick="show('menu3')"> 通过DOM操作样式 </a>
				<ul id="menu3">
					<li onclick="changeCss1()"><img src="https://zbd923.gitee.io/zheng-beidongs-workspace/images/doc.gif">为原始图片加上行间样式</li>
					<li onclick="changeCss2()"><img src="https://zbd923.gitee.io/zheng-beidongs-workspace/images/doc.gif">为所有的fieldset加上内部样式</li>
				</ul>
			</ul>

		</div>
		<fieldset>
			<legend>原始图片</legend>
			<img id="fruit" src="https://zbd923.gitee.io/zheng-beidongs-workspace/images/fruit.jpg">
		</fieldset>
		<fieldset>
			<legend>图片路径</legend>
			<p id="msg1">在这里显示</p>
		</fieldset>
		<fieldset>
			<legend>选择你喜欢的水果</legend>
			<ul style="text-align: left;">
				<li>
					<input name="enjoy" type="checkbox" value="苹果" />苹果
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="香蕉" />香蕉
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="葡萄" />葡萄
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="梨" />梨
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="西瓜" />西瓜
				</li>
			</ul>
			<div id="msg2" style="margin-top: 10px;text-align: left;"></div>
		</fieldset>
		<fieldset>
			<legend>创建图片</legend>
			<div id="msg3"></div>
		</fieldset>
		<fieldset>
			<legend>克隆图片</legend>
			<div id="msg4"></div>
		</fieldset>
		<script>
			//菜单收缩与扩展
			//219970544-郑北东
			function show(title) {
			    let currentMenu = document.getElementById(title);
			    let currentStatus = currentMenu.style.display;
			
			    // 关闭所有菜单项
			    let menus = document.querySelectorAll('[id^="menu"]');
			    menus.forEach(function(menu) {
			        if (menu.id !== title) {
			            menu.style.display = 'none';
			        }
			    });
			
			    // 切换当前菜单项的状态
			    currentMenu.style.display = currentStatus === "" ? "none" : "";
			}
			//获取原始图片路径
			function showImg() {
			    let imgSrc = document.getElementById('fruit').src;
			    document.getElementById('msg1').innerText = imgSrc;
			}
			//获取喜欢的水果
			function getFruit() {
			    let checkboxes = document.getElementsByName('enjoy');
			    let selectedFruits = [];
			    checkboxes.forEach(function(checkbox) {
			        if (checkbox.checked) {
			            selectedFruits.push(checkbox.value);
			        }
			    });
			    document.getElementById('msg2').innerText = "你喜欢的水果是：" + selectedFruits.join(", ");
			}
			//创建图片
			function createImg() {
			    let imgElement = document.createElement('img');
			    imgElement.src = 'https://zbd923.gitee.io/zheng-beidongs-workspace/images/grape.jpg'; // 设置新图片路径
			    document.getElementById('msg3').appendChild(imgElement);
			}
			//克隆图片
			function cloneImg() {
			    let originalImg = document.getElementById('fruit');
			    let clonedImg = originalImg.cloneNode(true);
			    document.getElementById('msg4').appendChild(clonedImg);
			}
			//改变图片
			function changeImg() {
			    let imgElement = document.getElementById('fruit');
			    imgElement.src = 'https://zbd923.gitee.io/zheng-beidongs-workspace/images/grape.jpg'; // 设置新的图片路径
			}
			//删除图片
			function removeImg() {
			    let imgElement = document.getElementById('fruit');
			    imgElement.parentNode.removeChild(imgElement);
			}
			//操作样式1
			function changeCss1() {
			    let originalImg = document.getElementById('fruit');
			    originalImg.style.border = "2px solid red"; // 添加行内样式
			}
			//操作样式2
			function changeCss2() {
			    let fieldsets = document.getElementsByTagName('fieldset');
			    for (let i = 0; i < fieldsets.length; i++) {
			        fieldsets[i].classList.add('newcss1'); // 添加类名
			    }
			}
		</script>
	</body>
</html>